<template>
  <div class="page">
    <div class="tools-bar">
      <div class="left-wrap">
        <el-button size="small" type="primary" @click="add">增加</el-button>
        <!-- {{moduleId(type)}} -->
      </div>
    </div>
    <el-table
    :data="tableData4"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID">
    </el-table-column>
    <el-table-column
      prop="roleName"
      label="角色名称">
    </el-table-column>
    <el-table-column
      prop="createDate"
      class="el-icon-time"
      label="创建时间">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button  type="text" size="small" class="el-icon-edit" @click="authorization(scope.row)">授 权</el-button>
        <!--<el-button type="text" size="small" class="el-icon-delete" @click="deleteServer(scope.row)">删 除</el-button>-->
        <el-button type="text" size="small" class="el-icon-delete" @click="open2(scope.row)">删 除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <pagination ref="pageInfo" :total="pageInfo.totalElements" :page.sync="pageInfo.currentPage" @pagination="pagination"></pagination>
    <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
      <el-form :model="serverForm" :rules="rules" ref="serverForm" label-width="100px" class="demo-serverForm">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色标识" prop="roleSign">
          <el-input v-model="ruleForm.roleSign" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="勾选您要为测试角色配置的菜单权限" :visible.sync="dialogFormVisible1">
      <el-tree
      :data="data2"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="eltree"
      highlight-current
      :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">返 回</el-button>
        <el-button type="primary" @click="submit2">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {api} from '@/utils'
  import { pagination } from '@/components'
  var roleId;

  export default {
    methods: {
      listReset(result,select){
        // console.log('result',result);
        for(let key in result){
          result[key].label = result[key].name;
          if(result[key].checked){
            select.push(result[key].id);
          }
          if(result[key].children.length > 0){
            let children = result[key].children;
            this.ergodicChildren(children,select);
          }
        }
      },
      ergodicChildren(children,select) {
        for(let key in children){
          children[key].label = children[key].name;
          if(children[key].checked){
            select.push(children[key].id);
          }
          if(children[key].children.length > 0){
            this.ergodicChildren(children[key].children);
          }
        }
      },
      cleanForm (data) {
        Object.keys(data).forEach(function (key) {
          data[key] = ''
        })
      },
      add() {
        this.dialogFormVisible = true
        this.cleanForm(this.ruleForm)
      },
      deleteServer (data) {
        this.$axios.request({
          url: api.deleteMdfTbrole,
          method: 'post',
          params: {
            id: data['id']
          }
        }).then(data => {
          if (data.code === 200) {
            this.$message({
              message: '保存成功',
              duration: 2000,
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.getData({
              applicationId: this.appId
            })
          } else {
            this.$message({
              message: '保存失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      },
      authorization(data) {
        this.dialogFormVisible1 = true;
        setTimeout(()=> {
          console.log(this.$refs.eltree,'123');
        },0);
        roleId = data['id'];
        this.$axios.request({
          url: api.loadassoignData,
          method: 'post',
          params: {
            roleId: data['id']
          }
        }).then(data => {
          let result = data.data;
          if (data.success === true) {
            console.log('单授权数据', result);
            let select = [];
            this.listReset(result,select);
            console.log(result);
            this.data2 = result;
            // console.log(this.aaa);
            console.log('this.$refs.eltreeauthorization',this.$refs.eltree);
            this.$refs.eltree.setCheckedKeys(select);
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        });
      },
      getData (param) {
        this.$axios.request({
          url: api.getTableList,
          method: 'post',
          params: param
        }).then(data => {
          let result = data.data;
          this.pageInfo.totalElements = data.total;
          if (data.success === true) {
            console.log('userinfor',result);
            this.tableData4 = result;
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      },
      pagination (e) {
        let params = {}
        params.pageNum = e.page
        params.pageSize = e.limit
        this.getData(params)
      },
      submit () {
        let url = '';
        url = api.addUser;
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$axios.request({
              url: url,
              method: 'post',
              params: this.ruleForm
            }).then(data => {
              if (data.success === true) {
                this.$message({
                  message: '保存成功',
                  duration: 2000,
                  type: 'success'
                });
                this.dialogFormVisible = false;
                this.getData()
              } else {
                this.$message({
                  message: '保存失败',
                  duration: 2000,
                  type: 'error'
                })
              }
            })
          } else {
            return false;
          }
        })
      },
      submit2() {
        this.param = {};
        this.param.roleId = roleId;
        // this.param.menuIds = this.$refs.eltree.getCheckedKeys().concat(this.$refs.eltree.getHalfCheckedKeys());
        let ids = '';
        console.log('submit2',this);
        this.$refs.eltree.getCheckedNodes().forEach(function (obj) {
          ids += obj.id + ',';
        });
        this.param.menuIds = ids.substr(0, ids.length - 1);
        console.log('this.param.menuIds', this.param);
        this.$axios.request({
          url: api.doassign,
          method: 'post',
          params: this.param
        }).then(data => {
          console.log('1234', data.success);
          if (data.success === true) {
            this.$message({
              message: '保存成功',
              type: 'success',
              //this.authorization()
            });
            this.dialogFormVisible1 = false;
          } else {
            this.$message({
              message: '保存失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      },
      open2(data) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteServer(data);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    data() {

      return {
        tableData4: [],
        pageInfo: {
          totalElements: 0,
          currentPage: 1
        },
        dialogFormVisible:false,
        serverForm:{
        },
        ruleForm:{
          id:'',
          roleSign:''
        },
        rules:{
          roleName:[
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ]
        },
        dialogFormVisible1:false,
        defaultCheckedKeys:'',
        data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    components: {
      pagination
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped>

</style>
